import React, { Component } from 'react';
import { ActivityIndicator } from 'antd-mobile';
import { createHashHistory } from 'history';
import { syncHistoryWithStore, RouterStore } from 'mobx-react-router';
import { Router, Route, } from 'react-router';
import { inject, observer } from 'mobx-react';

import Home from './pages/home/Home';
import Monitor from './pages/monitor/Monitor';
import Data from './pages/data/Data';
import Me from './pages/me/Me';
import Login from './pages/login/Login';
import Reset from './pages/reset/Reset';
import MessageDetail from './pages/message_detail/MessageDetail';
import SubHome from './pages/sub_home/SubHome';
import HomeList from './pages/home_list/HomeList';
import CaseList from './pages/case_list/CaseList';
import UnDone from './pages/undone_details/UnDone';
import OverTime from './pages/over_time_case/OverTime';
import Unsatisfy from './pages/unsatisfy/Unsatisfy';
import UnsatisfyList from './pages/unsatisfy_list/UnsatisfyList';
import UnsatisfyDetails from './pages/unstatisfy_details/UnstatisfyDetails';
import KPIRank from './pages/kpi_rank/KPIRank';
import KPIDetails from './pages/kpi_details/KPIDetails';
import HotEventDetails from './pages/hot_event_details/HotEventDetails';
import HotTopTenTable from './pages/hot_top_ten_table/HotTopTenTable';
import HotEventMap from './pages/hot_event_map/HotEventMap';

import Tab from './component/tab_bar/tab';
import DevTools from 'mobx-react-devtools';
import { isDev } from './utils/index';
import * as allStores from './stores';
import AuthStore from './stores/AuthStore';
import ComponentStore from './stores/ComponentStore';

import './App.scss';

const hashHistory = createHashHistory();
const history = syncHistoryWithStore(hashHistory, allStores.routingStore);

const devtools = isDev ? <DevTools /> : null;

interface AppProps {
    authStore?: AuthStore;
    componentStore?: ComponentStore;
    routingStore?: RouterStore;
}

@inject('authStore', 'componentStore', 'routingStore')
@observer
export default class Container extends Component<AppProps> {
    componentDidMount() {
        const authStore = this.props.authStore!;

        authStore.apiTest('/caseCategories');
        authStore.apiTest('/departments');
        authStore.apiTest('/amountStatistics/districts');
        authStore.apiTest('/amountStatistics/requestTypes');
        authStore.apiTest('/amountStatistics/caseTypes');
        authStore.apiTest('/amountStatistics/caseCategories');
        authStore.apiTest('/amountStatistics/dateRange');
        authStore.apiTest('/hotEvents');
        authStore.apiTest('/hotWords');

        if (!authStore.isLogin) {
            hashHistory.push('/login');
        } else {
            hashHistory.push('/home');
        }

    }

    render(): JSX.Element {
        const { componentStore, authStore, routingStore } = this.props;

        return (
            <Router history={history}>
                <div
                    className="app-container"
                >
                    {devtools}
                    <Route path="/home" exact={true} component={Home} />
                    <Route path="/home_list" component={HomeList} />
                    <Route path="/details" component={SubHome} />
                    <Route path="/monitor" exact={true} component={Monitor} />
                    <Route path="/detail" exact={true} component={Data} />
                    <Route path="/me" exact={true} component={Me} />
                    <Route path="/login" exact={true} component={Login} />
                    <Route path="/reset" exact={true} component={Reset} />
                    <Route path="/message/:id" exact={true} component={MessageDetail} />
                    <Route path="/case_list" exact={true} component={CaseList} />
                    <Route path="/undone" exact={true} component={UnDone} />
                    <Route path="/over_time" exact={true} component={OverTime} />
                    <Route path="/rank" exact={true} component={SubHome} />
                    <Route path="/unsatisfy" exact={true} component={Unsatisfy} />
                    <Route path="/unsatisfy_list" exact={true} component={UnsatisfyList} />
                    <Route path="/unsatisfy_details" exact={true} component={UnsatisfyDetails} />
                    <Route path="/case_details" exact={true} component={UnsatisfyDetails} />
                    <Route path="/kpi_rank" exact={true} component={KPIRank} />
                    <Route path="/kpi_details" exact={true} component={KPIDetails} />
                    <Route path="/hot_event_details" exact={true} component={HotEventDetails} />
                    <Route path="/hot_top_ten_table" exact={true} component={HotTopTenTable} />
                    <Route path="/hot_event_map" exact={true} component={HotEventMap} />
                    <ActivityIndicator toast={true} text="登录中..." size="large" animating={componentStore!.toastFlag} />
                    <div className="tabBar">
                        <Tab
                            authStore={authStore!}
                            componentStore={componentStore!}
                            routingStore={routingStore!}
                        />
                    </div>
                </div>
            </Router>
        );
    }
}
